<template>
  <div id="course" style="background: #fff">
    <h1>我的课程</h1>

    <div class="search">
      <h2 style="float: left">状态:</h2>
      <meunBtn
        :meunBtnkey="search.enabledMark"
        :list="meunBtnList"
        @change="changemeun"
      ></meunBtn>

      <div class="appendinput">
        <el-input
          placeholder="请输入课程名称"
          v-model="search.jsbos_tems_course_jsbos_name"
          class="input-with-select"
        >
          <el-button
            slot="append"
            type="primary"
            icon="el-icon-search"
            @click="initData"
          ></el-button>
        </el-input>

        <el-button
          type="text"
          icon="el-icon-download"
          style="margin-left: 10px"
          @click="exportForm"
          >导出</el-button
        >
      </div>
    </div>

    <div class="content" v-loading="listLoading">
      <div
        class="box"
        style="cursor: pointer"
        v-for="item in list"
        @click="toDetail(item.courseId)"
        :key="item.id"
      >
        <el-image :src="define.APIURl + item.cover" class="image" />

        <div class="info">
          <h1>{{ item.name }}</h1>
          <div class="p" style="display: flex; align-items: center">
            <span style="height: 30px; margin-top: 5px; display: inline-block">
              完成条件：
            </span>
            <div class="checkboxlist">
              <el-checkbox
                class="checkbox"
                :checked="item.chapterProgress >= 100 ? true : false"
                >章节完成</el-checkbox
              >
              <el-checkbox
                class="checkbox"
                v-if="item.isHaveHomework == '1'"
                :checked="item.isCompletedHomework == '1' ? true : false"
                >课后作业</el-checkbox
              >
              <el-checkbox
                class="checkbox"
                v-if="item.isHaveExam == '1'"
                :checked="item.isCompletedExam == '1' ? true : false"
                >课后考试</el-checkbox
              >
              <el-checkbox
                class="checkbox"
                style="width: 85px"
                v-if="item.isHaveStar == '1'"
                :checked="item.isCompletedStar == '1' ? true : false"
                >星评</el-checkbox
              >
            </div>
          </div>
          <p class="p">上次学习：{{ item.lastModifyTime }}</p>
          <p class="p">
            总进度
            <el-progress
              style="margin-left: 20px; width: 400px; display: inline-block"
              :percentage="item.process"
            ></el-progress>
          </p>
        </div>
        <div class="btn" style="width: 120px">
          <el-button> 查看详情 </el-button>
        </div>
      </div>
      <el-empty v-if="list.length == 0" description="暂无数据"></el-empty>
    </div>
  </div>
</template>

<script>
import meunBtn from "./compents/meunBtn";
import define from "@/utils/define";
import request from "@/utils/request";

export default {
  name: "course",
  components: {
    meunBtn,
  },
  data() {
    return {
      listLoading: false,
      meunBtnList: [
        { name: "全部", id: "" },
        { name: "未完成", id: 0 },
        { name: "已完成", id: 1 },
      ],
      input3: "",
      search: {
        currentPage: 1,
        pageSize: 999,
        sidx: "",
        sort: "desc",
        enabledMark: "",
      },
      list: [],
    };
  },
  methods: {
    toDetail(id) {
      this.$router.push(`/course/detail?id=${id}`);
    },
    changemeun(item) {
      this.search.enabledMark = item.id;
      this.initData();
    },

    initData() {
      this.listLoading = true;
      let _query = {
        ...this.search,
      };
      request({
        url: `/api/course/TemsCourseStudy/getList`,
        method: "post",
        data: _query,
      }).then((res) => {
        this.list = [...res.data.list];
        this.listLoading = false;
      });
    },
  },
  mounted() {},
  created() {
    this.initData();
  },
  beforeDestroy() {},
};
</script>
<style lang="scss">
#course {
  .el-checkbox__input {
    .el-checkbox__inner {
      border-radius: 50% !important;
      width: 16px !important;
      height: 16px !important;
      line-height: 16px !important;
      text-align: center;
      font-size: 16px !important;
    }

    .el-checkbox__inner::after {
      // border: 2px solid #FFF;
      height: 8px;
      left: 5px;
      position: absolute;
      top: 2px;
      // border: 2px solid #FFF;
    }

    // .el-checkbox__inner::after {

    // }
  }

  .is-checked {
    .el-checkbox__inner {
      background-color: #44b44f !important;
      border-color: #44b44f !important;
    }

    .el-checkbox__label {
      color: #666 !important;
      font-size: 14px !important;
    }
  }
}
</style>
<style lang="scss" scoped>
#course {
  padding: 20px;
  float: right;
  margin-top: 20px;
  width: 955px;
  background-color: #fff;
}

.search {
  padding-bottom: 20px;
  border-bottom: 0.5px solid #e6e6e6;
  margin-top: 20px;
  line-height: 32px;
  width: 100%;

  // display: flex;
  // justify-items: center;
  .appendinput {
    margin-top: -31px;
    width: 200px;
    float: right;
    display: flex;
  }
}

.box {
  margin-top: 30px;

  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #f4f4f4;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;

  .image {
    width: 258px;
    height: 145px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border-radius: 8px;
  }

  .info {
    width: 502px;

    .p {
      color: #666;
      font-size: 14px;
      margin: 8px 0 0 0;
      line-height: 25px;
      min-height: 20px;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      overflow: hidden;
    }
  }

  .checkboxlist {
    display: inline-block;

    width: 400px;
    // display: flex;
    // justify-content: space-between;
  }

  .checkbox {
    float: left;
    display: inline-block;
    background-color: #f4f4f4;
    border-radius: 12px;
    margin-right: 12px;
    // margin-bottom: 12px;
    padding: 4px 8px 4px 8px;
    // padding-left: ;
    width: 108px;
    height: 30px;
    // pointer-events: none;
  }
}
</style>
